<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>蔡进东的日志</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="不要在最该奋斗的年纪去偷懒!">
<meta property="og:type" content="website">
<meta property="og:title" content="蔡进东的日志">
<meta property="og:url" content="http://cai4633.github.io/page/4/index.html">
<meta property="og:site_name" content="蔡进东的日志">
<meta property="og:description" content="不要在最该奋斗的年纪去偷懒!">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="蔡进东的日志">
<meta name="twitter:description" content="不要在最该奋斗的年纪去偷懒!">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">蔡进东的日志</a>
      </h1>
      
      <h2 id="subtitle-wrap">
        <a href="/" id="subtitle">不要在最该奋斗的年纪选择去偷懒，只有度过一段连自己都被感动了的日子，才能变成那个最好的自己.</a>
      </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
        <a class="main-nav-link" href="/">Home</a>
        
        <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div class="local-search local-search-plugin">
        <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" />
        <div id="local-search-result" class="local-search-result-cls"></div>
      </div>
      <!-- <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://cai4633.github.io"></form>
      </div> -->
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="post-http入门" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/03/07/http入门/" class="article-date">
  <time datetime="2020-03-06T17:08:51.000Z" itemprop="datePublished">2020-03-07</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/03/07/http入门/">http入门</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在之前的一段时间的里我着重去学习了 html,css,js 以及 vue 等应用类知识点，而忽略了 http 的学习，导致遇到问题有些力不从心，无法洞悉问题的本质，所以这几天重新学习了一下 http。</p>
<h2 id="www（world-wide-web）"><a href="#www（world-wide-web）" class="headerlink" title="www（world wide web）"></a>www（world wide web）</h2><p>http 出现之前，人们主要通过 email 和 ftp 的方式来上网交流。1980-1990 年间，http 和 gopher 等方案被提出，后来 http 以其易用性胜出。1990 年，Tim Berners-Lee（李爵士）发明了 www，主要包括三个概念：<strong>URI,HTTP 和 HTML</strong></p>
<h2 id="URL"><a href="#URL" class="headerlink" title="URL"></a>URL</h2><p>URI（uniform resource identity）通用资源标识符包括 URN（uniform resource name)和 URL(uniform resource location)。<br>通过 URN 可以确定唯一的资源，URL 可以确定唯一的地址。</p>
<h3 id="URL-的组成"><a href="#URL-的组成" class="headerlink" title="URL 的组成"></a>URL 的组成</h3><p>URL 通常由协议、主机、端口、路径、查询参数以及锚点等组成。<br><img src="/images/url.png" alt="url结构"><br><code>protocol :// hostname[:port] / path / [parameters][?query]#fragment</code><br><strong>协议</strong>：http，https，[ftp，mailto，ed2k，file:///]<br><strong>主机</strong>： `.com 一级域名（顶级域名） baidu.com 二级域名 <a href="http://www.baidu.com" target="_blank" rel="noopener">www.baidu.com</a> 三级域名<br><strong>端口</strong>：对应服务器端口。每个端口的分配功能不同。（默认端口 80）</p>
<table>
<thead>
<tr>
<th align="center">端口</th>
<th align="center">分配功能</th>
</tr>
</thead>
<tbody><tr>
<td align="center">21</td>
<td align="center">ftp</td>
</tr>
<tr>
<td align="center">53</td>
<td align="center">DNS</td>
</tr>
<tr>
<td align="center">80</td>
<td align="center"><strong>http</strong></td>
</tr>
<tr>
<td align="center">443</td>
<td align="center"><strong>https</strong></td>
</tr>
<tr>
<td align="center">1080</td>
<td align="center">代理端口</td>
</tr>
</tbody></table>
<p><strong>路径</strong>：以‘/’开头的路径，不同于文件系统的路径，它决定于后端的路由。<br><strong>查询参数</strong>：请求或查询的键值对<br><strong>锚点</strong>：这个部分不会发送给后端，它根据前端页面元素 id 值来跳转。</p>
<h3 id="DNS（domain-name-system-域名系统"><a href="#DNS（domain-name-system-域名系统" class="headerlink" title="DNS（domain name system)域名系统"></a>DNS（domain name system)域名系统</h3><p>我们访问网页，最终都是在访问域名对应<strong>IP 地址</strong>的服务器。浏览器中的域名会先在电脑中的<strong>HOST 文件</strong>(vi /etc/hosts)中寻找对应的 IP，如果找不到就会去电信公司的 DNS 系统中寻找。很多大公司会有多台服务器，这样同一个域名可能对应多个 IP，DNS 系统会根据就近原则返回给我们对应的服务器。<br>查询 ip：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">nslookup &lt;域名&gt;</span><br><span class="line">ping &lt;域名&gt;</span><br></pre></td></tr></table></figure>

<h2 id="http"><a href="#http" class="headerlink" title="http"></a>http</h2><p>互联网中包含客户端和服务器。我们在浏览器中上网实际上是：client 发送请求 →server 接受请求 →server 发送响应 →client 接收并下载响应。<br><strong>bash 访问 url:</strong> <code>curl [-X &lt;get/post/put/patch/delete&gt;] [-d &quot;12345&quot;] -s -v [-H &quot;a:b&quot;] -- &lt;url&gt;</code></p>
<h3 id="http-请求格式"><a href="#http-请求格式" class="headerlink" title="http 请求格式"></a>http 请求格式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">part1 动词 路径 协议/版本</span><br><span class="line">part2 Key1: value1</span><br><span class="line">part2 Key2: value2</span><br><span class="line">part2 Key3: value3</span><br><span class="line">part2 Content-Type: application/x-www-form-urlencoded</span><br><span class="line">part2 Host: www.baidu.com</span><br><span class="line">part2 User-Agent: curl/7.54.0</span><br><span class="line">part3</span><br><span class="line">part4 要上传的数据</span><br></pre></td></tr></table></figure>

<ol>
<li>请求最多包含四部分，最少包含三部分。（第四部分可以为空）</li>
<li>第一部分请求动词包括 GET（获取/查询） POST(上传) PUT(整体更新) PATCH(局部更新) DELETE(删除) HEAD OPTIONS 等</li>
<li>第一部分的路径包括「查询参数」，但不包括「锚点」（注意区别于 url 路径）。如果你没有写路径，那么路径默认为 ‘/’</li>
<li>第二部分中的 Content-Type 标注了第 4 部分的格式，第二部分都是 key-values。</li>
<li>第三部分永远都是一个回车（\n）。</li>
<li>第四部分是要上传的数据，可以为空。如果上传的数据是汉字，那它会被解析为以“%”分隔的三字节的 unicode。</li>
</ol>
<p><img src="/images/request.png" alt="http请求示例"></p>
<h3 id="http-响应格式"><a href="#http-响应格式" class="headerlink" title="http 响应格式"></a>http 响应格式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">part1 协议/版本号 状态码 状态解释</span><br><span class="line">part2 Key1: value1</span><br><span class="line">part2 Key2: value2</span><br><span class="line">part2 Content-Length: 17931</span><br><span class="line">part2 Content-Type: text/html</span><br><span class="line">part3</span><br><span class="line">part4 要下载的内容</span><br></pre></td></tr></table></figure>

<ol>
<li>第一部分的状态码是服务器对浏览器说的话。<br>1xx 不常用<br>2xx 表示请求成功 （200 成功 204 创建成功）<br>3xx（301 网页永久移走 302 网页暂时移走 304 响应内容与上次一样）<br>4xx 表示客户端请求出错,一般是 404<br>5xx 表示服务器出错</li>
<li>第二部分中的 Content-Type 标注了第 4 部分的格式，Content-Type 遵循 MIME 规范。</li>
<li>第三部分永远都是一个回车（\n）。</li>
<li>第四部分是要下载的数据。<br><img src="/images/response.png" alt="http响应示例"></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/03/07/http入门/" data-id="ckjqth4r400132gw0c6sik1m1" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/http/">http</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-git和github的使用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/03/05/git和github的使用/" class="article-date">
  <time datetime="2020-03-05T01:52:07.000Z" itemprop="datePublished">2020-03-05</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/03/05/git和github的使用/">git和github的使用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>git是一个代码版本管理工具，git可以创建本地和远程仓库，其中github就可以作为远程代码仓库。windows中要使用git需要安装git bash。</p>
<h3 id="git-bash"><a href="#git-bash" class="headerlink" title="git bash"></a>git bash</h3><p>git bash是一套linux虚拟环境，内置linux命令和git命令。它是比cmd更好用的命令行工具。<br>安装完成后首先全局设置好用户名，用户邮箱等属性。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https://registry.npm.taobao.org</span><br><span class="line">git config --global user.name xxx #设置username</span><br><span class="line">git config --global user.email xxx #设置邮箱</span><br><span class="line">git config --global push.default simple # </span><br><span class="line">git config --global core.quotepath false #防止文件名变成数字</span><br><span class="line">git config --global core.editor &quot;vim&quot; # 使用vim编辑提交信息</span><br></pre></td></tr></table></figure>

<h3 id="本地仓库"><a href="#本地仓库" class="headerlink" title="本地仓库"></a>本地仓库</h3><ol>
<li><p>初始化仓库 git init</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">cd &lt;path&gt;</span><br><span class="line">mkdir &lt;dirName&gt;</span><br><span class="line">cd &lt;dirName&gt;</span><br><span class="line">git init    #初始化仓库</span><br></pre></td></tr></table></figure>
</li>
<li><p>git add [-A /-u/./<path>]<br>添加文件或者文件夹到本地仓库暂存区（有些地方也称为索引库）。</path></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git add &lt;path&gt;  添加指定的文件和文件夹</span><br><span class="line">git add .       添加仓库中所有变动到暂存区，但**不包括删除的文件**</span><br><span class="line">git add -u      添加已经tracked的文件变动至暂存区，但不包括**新添加的文件**</span><br><span class="line">git add -A      添加所有文件和变动至暂存区</span><br></pre></td></tr></table></figure>
</li>
<li><p>git commit [&lt;-m description&gt;]<br>将暂存区的内容提交到本地仓库。如果不添加-m参数，那么会自动打开vim编辑器让我们输入commit描述。<br>vim编辑器通过<kbd>i</kbd>来切换编辑模式，编辑完成后通过<kbd>esc</kbd>来切换命令模式，并使用<kbd>:wq</kbd>保存退出或者使用<kbd>:q!</kbd>不保存直接退出。</p>
</li>
</ol>
<h3 id="远程仓库"><a href="#远程仓库" class="headerlink" title="远程仓库"></a>远程仓库</h3><ol>
<li><p>远程仓库创建：直接在github上create repository</p>
</li>
<li><p>关联远程仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git remote add origin git@github.com:XXX/YY.git     # ssh关联</span><br><span class="line">git remote add origin https://github.com/XXX/YY.git     # https关联</span><br></pre></td></tr></table></figure>
</li>
<li><p>推送到远程仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git pull    #当远程库被人为改变导致本地和远程仓库不一致，就需要git pull后再git push</span><br><span class="line">git push -u origin master</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="其他常用指令"><a href="#其他常用指令" class="headerlink" title="其他常用指令"></a>其他常用指令</h3><p>git status &lt;-sb&gt; 查看git状态(显示总结和分支)<br>git log 查看提交记录<br>git clone &lt;地址&gt;  克隆代码<br>git remote set-url origin <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:xxxxx.git 重新设置远程地址<br>git branch 新建分支<br>git merge 合并分支<br>git stash 保存当前进度但不提交，然后可以切换到其他分支<br>git checkout 切换分支<br>git stash pop 读取之前保存的未提交记录<br>git revert 撤销某次提交<br>git reset 回退到撤销点<br>git diff 查看详细变化</p>
<h3 id="几个文件的作用"><a href="#几个文件的作用" class="headerlink" title="几个文件的作用"></a>几个文件的作用</h3><p>.gitignore 忽略提交的文件或者文件夹<br>README.md  文档的描述<br>LISENCE 开源协议许可证</p>
<h3 id="新的github账号"><a href="#新的github账号" class="headerlink" title="新的github账号"></a>新的github账号</h3><p>首次创建github账号或者需要github支持多台设备时，就需要用到SSH绑定。</p>
<h4 id="SSH-key的获取"><a href="#SSH-key的获取" class="headerlink" title="SSH key的获取"></a>SSH key的获取</h4><p>windows系统中, 通常”~/“代表绝对路径”/c/Users/Administrator”（或者说当前用户user的绝对位置）。在”~/.ssh/“ 中有两个文件，id_rsa相当于钥匙，id_rsa.pub相当于锁。我们只需要复制id_rsa.pub到github的SSH key中即可。<br>可以通过以下命令来获取新的SSH key：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> rm -rf ~/.ssh/*    #删除原来的key</span><br><span class="line">ssh-keygen -t rsa -b 4096 -C &quot;你的邮箱&quot;    # 连按三次enter，生成新的key</span><br></pre></td></tr></table></figure>

<p>与github绑定后，通过<code>ssh -T git@github.com</code>来验证是否绑定成功。</p>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/03/05/git和github的使用/" data-id="ckjqth4qo000q2gw0xof61nht" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/git/">git</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/github/">github</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-工欲善其事必先利其器" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/03/02/工欲善其事必先利其器/" class="article-date">
  <time datetime="2020-03-01T17:40:09.000Z" itemprop="datePublished">2020-03-02</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/03/02/工欲善其事必先利其器/">工欲善其事必先利其器</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>今天把在前端开发中常用到的工具汇总一下，并附上下载和使用说明地址以供日后查阅。</p>
<table>
<thead>
<tr>
<th align="center">软件名称</th>
<th align="center">用途</th>
<th align="center">下载地址</th>
</tr>
</thead>
<tbody><tr>
<td align="center">ld</td>
<td align="center">fq(愉快的上网)</td>
<td align="center"><a href="https://getlantern.org/zh_CN/index.html" target="_blank" rel="noopener">地址</a></td>
</tr>
<tr>
<td align="center">colorpix</td>
<td align="center">取色器</td>
<td align="center"><a href="https://colorpix.en.softonic.com/" target="_blank" rel="noopener">地址</a></td>
</tr>
<tr>
<td align="center">VSCode</td>
<td align="center">代码编辑器</td>
<td align="center"><a href="https://code.visualstudio.com/" target="_blank" rel="noopener">地址</a></td>
</tr>
<tr>
<td align="center">sublime3</td>
<td align="center">代码编辑器</td>
<td align="center"><a href="https://www.sublimetext.com/" target="_blank" rel="noopener">地址</a></td>
</tr>
<tr>
<td align="center">Node.js/npm</td>
<td align="center">node环境</td>
<td align="center"><a href="https://nodejs.org/en/" target="_blank" rel="noopener">地址</a></td>
</tr>
<tr>
<td align="center">git</td>
<td align="center">代码管理工具</td>
<td align="center"><a href="https://git-scm.com/downloads" target="_blank" rel="noopener">地址</a></td>
</tr>
</tbody></table>
<p>上面这些软件都打包到百度云备份。</p>
<h2 id="ld"><a href="#ld" class="headerlink" title="ld"></a>ld</h2><p>ld免费版有流量限制，<a href="https://github.com/YoulianBoshi/lantern-vpn" target="_blank" rel="noopener">破j方法在此</a>，破j后可以无视流量。也可手动更改mac地址，win7 mac地址第二位必须是2,6,A,E中的一个，一般以2A开头才有效（切记备份初始mac）。</p>
<h2 id="node-js"><a href="#node-js" class="headerlink" title="node.js"></a>node.js</h2><p>node.js安装完成后，在CMD或者Git Bash中使用。<br>node.js安装后自带npm。npm是包管理工具，常见用法可见<a href="/2019/10/30/npm常用的命令">自己总结的文章</a>。</p>
<h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>npm 的配置被存储在 ~/.npmrc。打开 Git Bash，依次输入以下命令，按回车：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https://registry.npm.taobao.org/</span><br><span class="line">npm config set loglevel http</span><br><span class="line">npm config set progress false</span><br></pre></td></tr></table></figure>

<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p>进入：在git bash中输入node，回车，就可以进入 node 运行环境，此时就可以写 JS 了。<br>退出：ctrl+D 退出           ctrl+C 中断</p>
<h2 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h2><p>git bash是一套linux虚拟环境，内置linux命令和git命令。它是比cmd更好用的命令行工具。<br>git bash安装后也需要配置：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name xxx #设置username</span><br><span class="line">git config --global user.email xxx #设置邮箱</span><br><span class="line">git config --global push.default simple # </span><br><span class="line">git config --global core.quotepath false #防止文件名变成数字</span><br><span class="line">git config --global core.editor &quot;vim&quot; # 使用vim编辑提交信息</span><br></pre></td></tr></table></figure>

<h3 id="git小白专用命令："><a href="#git小白专用命令：" class="headerlink" title="git小白专用命令："></a>git小白专用命令：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">git init</span><br><span class="line">git add</span><br><span class="line">git commit</span><br><span class="line">git pull</span><br><span class="line">git push (origin master)</span><br><span class="line">git clone</span><br><span class="line">git status [-sb]</span><br></pre></td></tr></table></figure>

<p>关于git的使用方法请移步：<a href="https://www.liaoxuefeng.com/wiki/896043488029600" target="_blank" rel="noopener">廖雪峰的Git教程</a></p>
<h2 id="git-bash命令行"><a href="#git-bash命令行" class="headerlink" title="git bash命令行"></a>git bash命令行</h2><p>以’/‘开头的路径就是绝对路径，它是文件的完整路径。<br>不以’/‘开头的路径就是相对路径。</p>
<h3 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h3><ol>
<li>cd ~/desktop   #改变文件夹</li>
<li>mkdir [directory] #添加文件夹</li>
<li>touch [filename]/ echo [content] &gt; [filename] #添加文件</li>
<li>vi [filename] 使用vim编辑文件</li>
<li>open/start [filename] 打开/执行文件</li>
<li>mv [filename1] [filename2] 移动或重命名文件</li>
<li>cp [filename1] [path] 复制文件</li>
<li>rm [-rf] [filename] 删除文件或者文件夹</li>
<li>ls -l  显示文件详细信息</li>
<li>chmod +x [filename] 使文件可执行</li>
</ol>
<h3 id="bashrc文件"><a href="#bashrc文件" class="headerlink" title="~/.bashrc文件"></a>~/.bashrc文件</h3><ol>
<li><p>git bash 启动时会优先自动.bashrc文件中命令，所以可以自定义一些自启动命令。</p>
</li>
<li><p>bashrc文件中可以起别名：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alias la=&apos;ls -a&apos;</span><br></pre></td></tr></table></figure>
</li>
<li><p>可以设置一些环境变量和系统PATH值<br>在bash中，可执行的文件就是命令，如sh，cp，mkdir,mv等，不可执行的文件就是配置。</p>
</li>
<li><p>可以直接使用[demo.sh]来执行命令，此时必须将demo.sh的pwd添加到$PATH中。</p>
</li>
<li><p>使用[sh demo.sh]执行命令，bash会在当前目录中查找文件，未查到目标就在$PATH中查找。</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">export SASS_BINARY_SITE=&quot;https://npm.taobao.org/mirrors/node-sass&quot;</span><br><span class="line">export PATH=&quot;目录的绝对路径:$PATH&quot;  # 添加绝对路径到系统PATH中</span><br></pre></td></tr></table></figure>

<p>2个好用的命令行网站：</p>
<ol>
<li><a href="https://explainshell.com/" target="_blank" rel="noopener">explainshell</a></li>
<li><a href="https://github.com/tldr-pages/tldr" target="_blank" rel="noopener">tldr</a></li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/03/02/工欲善其事必先利其器/" data-id="ckjqth4si003a2gw0riwpnm2l" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/软件下载/">软件下载</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-v-if和v-show" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/02/27/v-if和v-show/" class="article-date">
  <time datetime="2020-02-27T04:05:25.000Z" itemprop="datePublished">2020-02-27</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/css/">css</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/02/27/v-if和v-show/">v-if和v-show</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="v-if和v-show的区别"><a href="#v-if和v-show的区别" class="headerlink" title="v-if和v-show的区别"></a>v-if和v-show的区别</h2><ol>
<li>v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加display:none，dom元素还在。</li>
<li>性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。</li>
<li>编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。</li>
</ol>
<h2 id="display-none和visiblity-hidden的区别"><a href="#display-none和visiblity-hidden的区别" class="headerlink" title="display:none和visiblity:hidden的区别"></a>display:none和visiblity:hidden的区别</h2><ol>
<li>display:none 不占页面空间，元素不占页面空间后，该元素和其内部元素的宽高值永远是0。visiblity:hidden占据原先页面空间。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。</li>
<li>display:none 的子元素也一定无法显示，visiblity:hidden的子元素可以设置显示。display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来。在这一点上，如果页面是比较复杂或者是不受控制的，就要慎重使用visiblity:hidden，因为保不齐哪个元素被设置成可见，影响显示效果。</li>
<li>display:none 引起页面重绘和回流， visiblity:hidden只引起页面重绘。visiblity:hidden看起来的性能比display:none好些在两者都能使用情况下，可先考虑visiblity:hidden。</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/02/27/v-if和v-show/" data-id="ckjqth4rk001f2gw0keyjflqs" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/v-if/">v-if</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/v-show/">v-show</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-position定位小结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/02/23/position定位小结/" class="article-date">
  <time datetime="2020-02-22T20:26:44.000Z" itemprop="datePublished">2020-02-23</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/css/">css</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/02/23/position定位小结/">position定位小结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="position属性"><a href="#position属性" class="headerlink" title="position属性"></a>position属性</h2><p>position属性的值有static(默认值)，relative，absolute，fixed。</p>
<h3 id="static"><a href="#static" class="headerlink" title="static:"></a>static:</h3><p>所有元素默认值。即没有定位，元素仍出现在正常文本流中。<br>特性：</p>
<ol>
<li><strong><em>忽略 top, bottom, left, right或者z-index声明</em></strong>。</li>
</ol>
<h3 id="relative"><a href="#relative" class="headerlink" title="relative:"></a>relative:</h3><p>相对定位元素会<strong>相对于它自己在正常流中的默认位置</strong>偏移。<br>特性：</p>
<ol>
<li>相对于自己偏移，但原来所占的位置将继续占有，没有脱离标准文档流，<strong>可设置z-index属性</strong>。</li>
<li>每次移动是以自己的左上角为基点移动。</li>
</ol>
<h3 id="absolute"><a href="#absolute" class="headerlink" title="absolute:"></a>absolute:</h3><p>生成绝对定位的元素。<strong>相对于static定位以外</strong>的第一个父元素进行定位。脱离正常文档流，<strong>可设置z-index属性</strong>实现层叠。<br>特性：</p>
<ol>
<li>绝对定位偏移基准点是父元素的<strong>padding-box左上角</strong>，即absolute元素的margin-box相对于父元素的padding-box偏移。</li>
<li>没有设置定位值(left,right,top,bottom)的元素，仍处在原本在标准流中的位置。但是它已经脱离了文本流，不会影响兄弟元素的布局。</li>
<li>绝对定位元素的宽高百分比是相对于其最近的父级别定位元素的padding-box的大小来计算的。</li>
<li>定位值（left,right,top,bottom）的百分比也是相对于父元素的padding-box宽高来计算的。</li>
<li>当left，right，top，bottom无法同时满足时，优先满足left和top。</li>
</ol>
<h3 id="fixed"><a href="#fixed" class="headerlink" title="fixed:"></a>fixed:</h3><p>固定定位。一般<strong>相对于浏览器窗口</strong>进行定位，脱离正常文档流，可以设置z-index。<br>特性：</p>
<ol>
<li>固定定位相邻父元素出现transform和perspective属性，那么此时固定元素相对于父元素定位而不是浏览器窗口。</li>
<li>fixed固定定位对于IE6,7,8不兼容。</li>
<li>fixed固定定位元素的宽高百分比是相对于浏览器窗口（body的border-box）来计算的。</li>
<li>固定定位偏移基准点是视口的左上角，即fixed元素的margin-box相对于body的border-box偏移。</li>
</ol>
<p>任何元素都可以定位。不过<strong><em>绝对或固定定位会生成一个BFC</em></strong>。</p>
<h2 id="小结："><a href="#小结：" class="headerlink" title="小结："></a>小结：</h2><ol>
<li><p>触发 BFC<br>BFC可看成XY方向上标准流布局图层，只要元素满足下面任一条件即可触发 BFC 特性：</p>
<ol>
<li>body 根元素</li>
<li>浮动元素：float 除 none 以外的值</li>
<li>绝对定位元素：position: (absolute、fixed)</li>
<li>display 为 inline-block、table-cells、flex</li>
<li>overflow 除了 visible 以外的值 (hidden、auto、scroll)</li>
</ol>
</li>
<li><p>z-index（默认值auto）</p>
<ol>
<li>只有position为relative/absolute/fixed时（除了static）,Z-index才生效。</li>
<li>z-index:0和z-index:auto层叠水平一样。但是z-index:auto不会产生层叠上下文，而z-index:0(或者数值)都会产生新的层叠上下文。</li>
<li>同一层叠上下文，z-index越大层叠水平越高，层叠水平相同后来居上。</li>
<li>不同层叠上下文比较，要比较其父元素层叠水平。</li>
</ol>
</li>
<li><p>层叠顺序和层叠上下文</p>
<ol>
<li>七层层叠顺序<br><img src="/images/123.png" alt="七层层叠顺序"></li>
<li>层叠上下文<br>层叠上下文可看成Z方向上布局图层。元素满足下面任一条件即可产生新的层叠上下文：<ol>
<li>html根元素 。</li>
<li>position值为 absolute|relative，且 z-index值不为 auto。</li>
<li>position 值为 fixed|sticky。</li>
<li>z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex。</li>
<li>opacity 属性值小于 1 的元素。</li>
<li>transform 属性值不为 none的元素。</li>
<li>mix-blend-mode 属性值不为 normal 的元素。</li>
<li>filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path值不为none的元素 。</li>
<li>perspective 值不为 none 的元素。</li>
<li>isolation 属性被设置为 isolate 的元素 。</li>
<li>will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值。</li>
<li>-webkit-overflow-scrolling 属性被设置 touch的元素。<br>。</li>
</ol>
</li>
</ol>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/02/23/position定位小结/" data-id="ckjqth4rz001w2gw030u444az" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/BFC/">BFC</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/absolute/">absolute</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/position/">position</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/z-index/">z-index</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/层叠上下文/">层叠上下文</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-inline和inline-block的区别" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/02/23/inline和inline-block的区别/" class="article-date">
  <time datetime="2020-02-22T19:46:56.000Z" itemprop="datePublished">2020-02-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/02/23/inline和inline-block的区别/">inline、inline-block和block元素的区别</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>常见的元素有block块元素,inline内联元素和inline-block元素。</p>
<h2 id="block元素特点"><a href="#block元素特点" class="headerlink" title="block元素特点"></a>block元素特点</h2><ol>
<li>宽度默认auto,<strong>block元素width:auto时，宽度会尽可能宽。</strong>（默认填满父元素）,单个block元素独占一行，<strong>即使宽度设为0px</strong>。</li>
<li>宽度和高度可以设置。</li>
<li>padding、margin、border都可以设置。</li>
<li>内部可以嵌套block、inline和inline-block等各种元素。</li>
</ol>
<h2 id="inline元素的特点"><a href="#inline元素的特点" class="headerlink" title="inline元素的特点"></a>inline元素的特点</h2><ol>
<li>不会独占一行，多个inline元素可以占据同一行，直到宽度超过父元素才会另一行。</li>
<li>宽度和高度不可以设置，默认为auto，由内容宽高决定，具有包裹性。</li>
<li><strong>padding、margin和border在水平方向上可以设置，垂直方向上（padding-top|padding-bottom|margin-top |margin-bottom|border-top|border-bottom）设置无效</strong>。border-top和border-bottom即使在视觉上有效果，但实际上布局上不起作用。 </li>
<li>inline元素内部理论上不可以嵌套block元素</li>
</ol>
<iframe src="/pages/demo4" width="100%" height="400px" frameborder="0" allowfullscreen></iframe>

<h2 id="inline-block元素特点"><a href="#inline-block元素特点" class="headerlink" title="inline-block元素特点"></a>inline-block元素特点</h2><p>inline-block同时具备inline和block元素的特点。</p>
<ol>
<li>不独占一行</li>
<li>宽高可以设置，当宽高设为auto时又具备包裹性</li>
<li>padding、margin、border都可以设置</li>
<li>内部理论上不可以嵌套block元素</li>
</ol>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><ol>
<li>inline和inline-block元素<strong>第三条</strong>特点的差别很容易让人忽略。</li>
<li>inline元素由于内容而自动换行后，会导致border破裂。</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/02/23/inline和inline-block的区别/" data-id="ckjqth4rk00192gw0dttl58tu" class="article-share-link">Share</a>-->
      
      
    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-width百分比小结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/02/22/width百分比小结/" class="article-date">
  <time datetime="2020-02-22T12:18:24.000Z" itemprop="datePublished">2020-02-22</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/css/">css</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/02/22/width百分比小结/">width百分比小结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>width:100%中百分比肯定是相对于父元素而言的，但是由于padding，box-sizing等属性的影响，有时候会迷惑我们。所以今天对这个问题总结一下。</p>
<h2 id="box-sizing"><a href="#box-sizing" class="headerlink" title="box-sizing"></a>box-sizing</h2><p>box-sixing属性主要有content-box和border-box两个值，默认是content-box。这个属性直接影响元素本身的width值，间接影响子元素width值。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">box-sizing: content-box    //当前元素width值只包括content宽度</span><br><span class="line">box-sizing: border-box    //当前元素width值包括content,padding以及border的值</span><br></pre></td></tr></table></figure>

<h2 id="width-100-的元素是绝对定位"><a href="#width-100-的元素是绝对定位" class="headerlink" title="width:100%的元素是绝对定位"></a>width:100%的元素是绝对定位</h2><ol>
<li>absolute绝对定位元素的父元素是非static定位元素。它的width:100%取值等于父元素的content值加上padding值(与border-width无关)。</li>
<li>fixed固定定位元素的父元素是body（即浏览器窗口）。它是特殊的绝对定位，fixed固定定位元素的width:100%取值等于父元素（body）的content值和padding值以及border值之和。(与border-width有关)。<br>总的来说，<strong>fixed固定定位元素的width:100%等于浏览器窗口的width。</strong></li>
</ol>
<h2 id="width-100-的元素是非绝对定位"><a href="#width-100-的元素是非绝对定位" class="headerlink" title="width:100%的元素是非绝对定位"></a>width:100%的元素是非绝对定位</h2><p>非绝对定位元素width:100%的取值等于父元素的content值。包括position:relative相对定位元素也符合这一规则。</p>
<p><strong>浏览器url中出现“：”容易报错，所以width：100%不允许出现在标题中。</strong></p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>width百分比的计算要注意两点：</p>
<ol>
<li>找准父元素。<ol>
<li>普通文本流和relative相对定位元素以及static定位元素的父元素都是普通的父元素。</li>
<li>absolute绝对定位元素的父元素是离它最近的<strong><em>非static定位元素</em></strong>。</li>
<li>fixed固定定位元素的父元素是浏览器窗口（近似于body)。</li>
</ol>
</li>
<li>找准width计算规则<ol>
<li>absolute绝对定位元素的width:100%取值等于父元素的content值加上padding值(与border-width无关)。</li>
<li>fixed固定定位元素的width:100%等于浏览器窗口的width。</li>
<li>除此之外所有元素的width:100%等于父元素的content值。<br>上面两点可以确定好width值，然后元素本身会根据box-sizing属性来分配content，border以及padding。（margin-box浏览器支持有限）。</li>
</ol>
</li>
</ol>
<p>width auto的小结</p>
<ol>
<li>block元素的width:auto会使widh尽可能大直至撑满父元素，inline-block元素width:auto会使width尽可能小直至包裹内容。</li>
</ol>
<p>padding和margin百分比小结</p>
<ol>
<li>非绝对定位元素padding和margin百分比（包括padding-top    ，pading-bottom，margIn-top，margin-bottom）相对于父元素content-box的width值计算的。</li>
<li>绝对定位元素padding和margin百分比（包括padding-top，pading-bottom，margIn-top，margin-bottom）相对于最近非static定位父元素padding-box的width值计算的。</li>
</ol>
<p>border-width不能设置百分比</p>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2020/02/22/width百分比小结/" data-id="ckjqth4rz002b2gw0cw965co5" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/auto/">auto</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/width/">width</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/百分比/">百分比</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  
    <article id="post-vue中computed属性的理解" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/02/vue中computed属性的理解/" class="article-date">
  <time datetime="2019-11-01T16:25:19.000Z" itemprop="datePublished">2019-11-02</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/vue/">vue</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/11/02/vue中computed属性的理解/">vue中computed属性的理解</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>computed是vue中一个重要的属性-<strong>计算属性</strong>。</p>
<h2 id="基本用法："><a href="#基本用法：" class="headerlink" title="基本用法："></a>基本用法：</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    test:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.param;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="进阶用法："><a href="#进阶用法：" class="headerlink" title="进阶用法："></a>进阶用法：</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">computed:&#123;</span><br><span class="line">    test:&#123;</span><br><span class="line">        <span class="keyword">get</span>()&#123;              <span class="comment">//getter</span></span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.param;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span>(val)&#123;           <span class="comment">//setter</span></span><br><span class="line">            <span class="keyword">this</span>.param = val;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>##我的理解：<br>computed计算属性是在beforeCreate之后，created<br>之前这个时间段内<strong><em>初始化</em></strong>的。当前<strong><em>依赖的初始值</em></strong>决定了计算属性的的初始值。同时计算属性的结果会被缓存，除非之后依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性)<br>在该实例范畴之外，则计算属性是不会被更新的。</p>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2019/11/02/vue中computed属性的理解/" data-id="ckjqth4rz001z2gw0ucixvb6i" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue生命周期/">vue生命周期</a></li></ul>

    </footer>
  </div>
  <!---->
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/3/">&laquo; 上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/">5</a><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/5/">下一页 &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/01/08/前端鉴权总结/">前端鉴权总结</a>
          </li>
        
          <li>
            <a href="/2021/01/03/web性能优化/">web性能优化</a>
          </li>
        
          <li>
            <a href="/2020/12/31/nodejs入门/">nodejs 入门</a>
          </li>
        
          <li>
            <a href="/2020/12/27/vue单页面应用白屏屏优化/">vue单页面应用白屏屏优化</a>
          </li>
        
          <li>
            <a href="/2020/12/26/逸辰音乐问题点/">逸辰音乐问题点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">八月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ES6/">ES6</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/css/">css</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/html/">html</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/js/">js</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端项目/">前端项目</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/服务端/">服务端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/算法/">算法</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Array/">Array</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/BFC/">BFC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CORS/">CORS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM/">DOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM-diff/">DOM diff</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSONP/">JSONP</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue3/">Vue3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/absolute/">absolute</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/auto/">auto</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/background/">background</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/const/">const</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/devServer/">devServer</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/function/">function</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/host/">host</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/http/">http</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/js/">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/leancloud/">leancloud</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/let/">let</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/position/">position</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/promise/">promise</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/proxy/">proxy</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/script标签/">script标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/session-cookie/">session-cookie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/">token</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-if/">v-if</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-show/">v-show</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vDOM/">vDOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vHost/">vHost</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue-cli/">vue-cli</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vuec/">vuec</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue生命周期/">vue生命周期</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/width/">width</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/z-index/">z-index</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型链/">原型链</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/同源/">同源</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/外边距/">外边距</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/层叠上下文/">层叠上下文</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据结构/">数据结构</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器/">浏览器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/百分比/">百分比</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/精华/">精华</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/软件下载/">软件下载</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/鉴权/">鉴权</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div class="widget tagcloud">
      <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Array/" style="font-size: 10px;">Array</a> <a href="/tags/BFC/" style="font-size: 10px;">BFC</a> <a href="/tags/CORS/" style="font-size: 10px;">CORS</a> <a href="/tags/DOM/" style="font-size: 10px;">DOM</a> <a href="/tags/DOM-diff/" style="font-size: 10px;">DOM diff</a> <a href="/tags/JSONP/" style="font-size: 10px;">JSONP</a> <a href="/tags/Vue3/" style="font-size: 10px;">Vue3</a> <a href="/tags/absolute/" style="font-size: 10px;">absolute</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/auto/" style="font-size: 10px;">auto</a> <a href="/tags/background/" style="font-size: 10px;">background</a> <a href="/tags/const/" style="font-size: 10px;">const</a> <a href="/tags/devServer/" style="font-size: 10px;">devServer</a> <a href="/tags/function/" style="font-size: 10px;">function</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/host/" style="font-size: 10px;">host</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 16.67px;">http</a> <a href="/tags/jquery/" style="font-size: 10px;">jquery</a> <a href="/tags/js/" style="font-size: 20px;">js</a> <a href="/tags/leancloud/" style="font-size: 10px;">leancloud</a> <a href="/tags/let/" style="font-size: 10px;">let</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/position/" style="font-size: 10px;">position</a> <a href="/tags/promise/" style="font-size: 10px;">promise</a> <a href="/tags/proxy/" style="font-size: 10px;">proxy</a> <a href="/tags/script标签/" style="font-size: 10px;">script标签</a> <a href="/tags/session-cookie/" style="font-size: 10px;">session-cookie</a> <a href="/tags/token/" style="font-size: 10px;">token</a> <a href="/tags/v-if/" style="font-size: 10px;">v-if</a> <a href="/tags/v-show/" style="font-size: 10px;">v-show</a> <a href="/tags/vDOM/" style="font-size: 10px;">vDOM</a> <a href="/tags/vHost/" style="font-size: 10px;">vHost</a> <a href="/tags/vue/" style="font-size: 13.33px;">vue</a> <a href="/tags/vue-cli/" style="font-size: 10px;">vue-cli</a> <a href="/tags/vuec/" style="font-size: 10px;">vuec</a> <a href="/tags/vue生命周期/" style="font-size: 10px;">vue生命周期</a> <a href="/tags/width/" style="font-size: 10px;">width</a> <a href="/tags/z-index/" style="font-size: 10px;">z-index</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/同源/" style="font-size: 10px;">同源</a> <a href="/tags/外边距/" style="font-size: 10px;">外边距</a> <a href="/tags/层叠上下文/" style="font-size: 10px;">层叠上下文</a> <a href="/tags/性能优化/" style="font-size: 13.33px;">性能优化</a> <a href="/tags/数据结构/" style="font-size: 10px;">数据结构</a> <a href="/tags/浏览器/" style="font-size: 16.67px;">浏览器</a> <a href="/tags/百分比/" style="font-size: 10px;">百分比</a> <a href="/tags/算法/" style="font-size: 10px;">算法</a> <a href="/tags/精华/" style="font-size: 10px;">精华</a> <a href="/tags/软件下载/" style="font-size: 10px;">软件下载</a> <a href="/tags/鉴权/" style="font-size: 10px;">鉴权</a>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 <a href="http://github.com/cai4633/cai4633.github.io" target="_blank">Cai4633</a><br>
      <!--Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>-->
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    <script>
      let isMobile = false
      if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        isMobile = true
        $("#nav").addClass("is-mobile")
        $("footer").addClass("is-mobile")
      }
      if ($(".local-search").size()) {
        $.getScript("/js/search.js", function () {
          searchFunc("/search.xml", "local-search-input", "local-search-result")
        })
      }
    </script>
  </div>
</body>
</html>